



<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="/static/jquery-1.10.2.min.js"></script>
    <script src="/static/vue.min.js"></script>
    <script src="/static/layui.js"></script>
    <title>系统登录</title>
    <style type="text/css">
        .main {
            position: absolute;
            width: 100%;
            min-height: 540px;
        }

        body {
            background: #12201f
        }

        .bgimg {
            position: absolute;
            z-index: 100;
            top: 0;
            left: 0;
        }

        .main-content {
            max-width: 420px;
            position: relative;
            z-index: 200;
            margin: 0 auto;
        }



            .main-content > .panel {
                max-width: 420px;
                background: rgba(255, 255, 255, 0.37);
                border-radius: 8px;
            }

                .main-content > .panel > .rows {
                    height: 60px;
                    padding: 15px;
                }

        .title-bg {
            color: #fff;
            font-size: 30px;
            text-align: center;
            letter-spacing: 5px;
        }

        .login-name {
            font-size: 20px;
            color: #fff;
        }

        .myinput {
            float: left;
            height: 30px;
            font-size: 18px;
            border: 1px solid #eee;
            padding: 10px 15px;
            border-radius: 4px;
            outline: none
        }

        .a-check {
            display: inline-block;
            float: right;
            color: #ff9e45;
            font-size: 14px;
        }

        .myinput.input-code {
            border-radius: 4px 0 0 4px;
            width: 180px;
            float: left
        }

        .btncode {
            border: 1px solid #eee;
            width: 180px;
            height: 52px;
            line-height: 50px;
            font-size: 18px;
            text-align: center;
            outline: none;
            margin-left: -2px;
            border-radius: 0 4px 4px 0;
            background-color: #efefef;
            color: #333;
            padding: 0;
        }

        .btnlogin {
            height: 52px;
            max-width: 390px;
            width: 100%;
            background-color: #c24949;
            font-size: 18px;
            color: #fff;
            padding: 0;
            outline: none;
            line-height: 50px;
            border-radius: 4px;
            border: 0;
        }

        .p-tj {
            padding-top: 5px;
            margin: 0;
            font-size: 14px;
            color: #333;
        }

            .p-tj > a {
                font-size: 14px;
                color: #333;
                text-decoration: underline
            }

        .btncode-disabled {
            color: #808080
        }

        .btnlogining {
            background: #be7474
        }
    </style>
</head>
<body style="padding:0;margin:0;overflow:hidden;">
    <div id="myvue" class="main">
        <div class="main-content">
            <div class="panel">
                <div class="rows" id="rowfirst">
                    <div class="title-bg">
                        体验版营销助手
                    </div>
                </div>
                                    {% verbatim %}
                <div style="padding: 0 15px;height: 30px;line-height:30px;" class="rows">

                    <span class="login-name">{{LoginType=='psw'?'密码登录':'短信登录'}}</span>

                    <a class="a-check" href="javascript:;" v-on:click="onChkType">
                        {{LoginType=='code'?'密码登录':'短信登录'}}
                    </a>
                </div>

                <div class="rows">
                    <input type="text" v-model="LoginName" autocomplete="off" placeholder="输入账号" style="width:100%;max-width:360px" class="myinput input-rp" />
                </div>
                <div class="rows" v-if="LoginType=='psw'">
                    <input type="password" v-model="Password" autocomplete="off" placeholder="输入密码" style="width:100%;max-width:360px" class="myinput input-rp" />
                </div>
                <div class="rows" v-if="LoginType=='code'">
                    <input type="text" v-model="Code" autocomplete="off" maxlength="6" placeholder="输入验证码" class="myinput input-code" />
                    <button type="button" v-on:click="onSendCode" :disabled="IsSend" v-bind:class="'btncode'+(IsSend?' btncode-disabled':'')" v-html="BtnCodeTxt"></button>
                </div>
                <div class="rows" style="height:80px;">
                    <button v-on:click="onLogin" type="button" v-bind:class="'btnlogin'+(bl?'':' btnlogining')">{{bl?'登录':'登录中…'}}</button>
                                                        {% endverbatim %}
                    <p class="p-tj">
                        PC端登录推荐使用
                        <a href="https://sm.myapp.com/original/Browser/67.0.3396.99_chrome_installer.exe">Google Chrome</a>
                        /Safari浏览器
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var layer;
        var timer;
        var timer_index = 60;
        var djgo_csrf_token = '{{ csrf_token }}';
        var vm = new Vue({
            el: '#myvue',
            data: {
                LoginName: '',
                Password: '',
                LoginType: localStorage.getItem("logintype") == null ? 'psw' : localStorage.getItem("logintype"),
                Code: '',
                BtnCodeTxt: '获取验证码',
                IsSend: false,
                bl:true,
            },
            methods: {
                onChkType: function () {
                    vm.LoginType == 'code' ? vm.LoginType = 'psw' : vm.LoginType = 'code';
                    localStorage.setItem("logintype", vm.LoginType);
                    Vue.nextTick(function () {
                        setHeight();
                    })
                },
                onLogin: function () {
                    if (vm.LoginName === '' || (vm.LoginType === 'psw' && vm.Password === '') || (vm.LoginType === 'code' && vm.Code === '')) {
                        layer.msg('请输入账号&' + (vm.LoginType == 'psw' ? '密码' : '验证码'), { icon: 5, shift: 6 });
                    } else {
                        if (vm.bl) {
                            vm.bl = false;
                            $.post('/login/onLogin', {
                                loginname: vm.LoginName,
                                psw: vm.Password,
                                code: vm.Code,
                                type: vm.LoginType,
                                csrfmiddlewaretoken:  '{{ csrf_token }}',
                            }, function (rs) {
                                vm.bl = true;
                                if (rs.code == 0) {
                                    window.location.href = '/index';
                                } else if (rs.code == 2) {
                                    window.location.href = '/user/initPwdReset';
                                } else {
                                    layer.msg('登录失败：'+rs.msg, { icon: 5, shift: 6 });
                                }
                                });
                        }
                    }
                },
                onSendCode: function () {
                    if (vm.IsSend == false) {
                        if (vm.LoginName === '') {
                            layer.msg('请输入登录账号', { icon: 5, shift: 6 });
                        } else {
                            $.post("/login/onSendCode", { loginname: vm.LoginName }, function (rs) {
                                if (rs.code == 0) {
                                    layer.msg('发送成功', { icon: 6, shift: 5 });
                                    vm.IsSend = true;
                                    timer_index = 60;
                                    setInterval(function () {
                                        if (timer_index <= 0) {
                                            clearInterval(timer);
                                            vm.BtnCodeTxt = '获取验证码';
                                            vm.IsSend = false;
                                        } else {
                                            vm.BtnCodeTxt = '重新获取' + (timer_index) + 's';
                                        }
                                        timer_index--;
                                    }, 1000);
                                } else {
                                    layer.msg('发送失败：' + rs.msg, { icon: 5, shift: 6 });
                                }
                            });
                        }
                    }
                }
            },
            mounted: function () {
                layui.use(['layer'], function () {
                    layer = layui.layer;
                });
            }
        })
        function setHeight() {
            var wh = $(window).height();
            var ww = $(window).width();
            $("#myvue").height(wh);
            $("#myvue").width(ww);
            var wb = ww / wh; //1000:500;1000:600
            var img_ww = 2000;
            var img_hh = 1237;
            var mb = img_ww / img_hh;
            //以宽度
            var mw = 0, mh = 0, top = 0, left = 0;
            if (wb > mb) {
                mw = ww;
                mh = img_hh / img_ww * mw;
                top = -(mh - wh) / 2;
            }
            //以高度
            else {
                mh = wh;
                mw = img_ww / img_hh * mh;
                left = -(mw - ww) / 2;
            }
            $("#bgimg").css({ 'width': mw + 'px', 'height': mh + 'px', 'top': top + 'px', 'left': left + 'px' })
            var mc = $(".main-content").height();
            if (mc > wh) {
                $(".main-content").css('margin-top', '0');
            } else {
                $(".main-content").css('margin-top', (wh - mc) / 2 + "px");
            }
            var widt = $("#rowfirst").width();
            $(".input-rp").width(widt - 30);
            $(".input-code").width(widt / 2-30);
            $(".btncode").width(widt/2-2);
        }
        $(function () {
            setHeight();
        });
        $(window).resize(function () {
            setHeight();
        });
        $(document).keyup(function (event) {
            if (event.keyCode == 13) {
                vm.onLogin();
            }
        });
    </script>
</body>
</html>

